body{height:100%;background-color:#F9F9FA}

.top_mini4 {background-color:#F9F9FA;height:5rem;line-height:5rem;z-index:3}
.top_mini4 .L em{height:4.9rem}
.top_mini4 .L em i{font-size:1.8rem}
.top_mini4 .L i, .top_mini4 .R i{height:2rem;line-height:2rem;margin-top:1.5rem}
.top_mini4 .R i{font-size:2.2rem}
.top_mini4 h1{font-size:1.6rem}

.chatmain{background-color:#F9F9FA;padding:0;top:0;overflow:hidden}
.chatmain .udata{background-color:#F9F9FA;padding:0 0 2rem 0}
.chatmain .udata ul{background-color:#fff;border-bottom:#F9F9FA 1.2rem solid}
.chatmain .udata ul li:last-child{border:0}
/********msg*********/
#msg{width:100%;margin:5rem auto 0 auto;height:-webkit-calc(100vh - 10.5rem);-webkit-overflow-scrolling:touch;-webkit-user-select:none;-moz-user-select:none;overflow:auto;overflow-y:scroll;TABLE-LAYOUT:fixed; WORD-BREAK:break-all}
#msg dl{width:95%;margin:2rem auto;clear:both;overflow:hidden}
#msg dl dt,#msg dl dd{float:left;border-radius:2rem}
#msg dl dt{width:4rem;height:4rem;background-position:0 -15.8rem;background-color:#E0E0E0}
#msg dl dt img{width:4rem;height:4rem;border-radius:2rem;object-fit:cover;-webkit-object-fit:cover}
#msg dl dd{background-color:#fff;margin-left:1.5rem;font-size:1.5rem;color:#000;line-height:2rem;padding:1.2rem;text-align:left;position:relative;border-radius:1rem;max-width:calc(100% - 13rem);max-width:-webkit-calc(100% - 13rem);min-width:2rem;min-height:2rem}
#msg dl dd img{width:3rem;height:3rem}
#msg dl dd:before{content:"";position:absolute;right:100%;top:1.3rem;width:0;height:0;border-top:.7rem solid transparent;border-right:.8rem solid #fff;border-bottom:.7rem solid transparent}
#msg .my dt,#msg .my dd{float:right}
#msg .my dd{margin-left:0;margin-right:1.5rem;color:#fff}
#msg .my dd:before{border:0px}
#msg .my dd:after{content:'';position:absolute;left:100%;top:1.3rem;width:0;height:0;border-top:.7rem solid transparent;border-left:.8rem solid #FF5CB3;border-bottom:.7rem solid transparent}
@-webkit-keyframes playVoice {0% {width:.3rem;}34% {width:.6rem;}67% {width:1rem;}100% {width:1.8rem;}}
#msg  dl dd em .voiceIcon{position:absolute;width:1.8rem;height:2rem;left:1rem;right:initial;border-radius:1rem;background-repeat:no-repeat;background-size:auto 100%;background-position:left center;}
#msg .my dd em .voiceIcon{right:1rem;left:initial;background-position:right center}
#msg  dl dd em .voiceIcon.play{-webkit-animation:playVoice 1s infinite}
#msg  dl dd em .voiceSec{position:absolute;font-size:1.4rem;right:-2rem;bottom:1rem;color:#999}
#msg .my dd em .voiceSec{left:-2.5rem}
#msg span{display:inline-block;padding:0 1rem;line-height:2rem;background-color:#dedede;color:#fff;margin:1.5rem auto;font-size:1.2rem;border-radius:1rem;text-align:center}
#msg .firsttips{width:66%;padding:2.5rem 1.5rem;display:inline-block;line-height:2rem;background-color:#fff;margin:6.5rem auto 0 auto;font-size:1.2rem;border-radius:.8rem;text-align:center;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#msg .firsttips i{display:block;font-size:4rem;margin-bottom:2rem}
#msg dl dd div.lock{cursor:pointer;font-size:1.3rem;color:#999;text-align:center}
#msg dl dd div.lock a{color:#09f;display:block;margin-top:.5rem}
#msg dl dd div.lock a i{font-size:1.8rem}

/********write*********/
#write{width:100%;height:5.5rem;background-color:#F9F9FA;padding:1rem 0 0;text-align:center;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#write i,#msg dl dt{background-size:10.8rem 3.6rem;background-repeat:no-repeat}

#write table{width:95%;height:3.5rem;border-collapse:collapse;margin:0 auto;padding:0}
#write table td{padding:0;margin:0}
#write table tr td:nth-child(2){padding:0 .5rem;position:relative}
#write table tr td:nth-child(3){width:6rem;text-align:right}
#write table tr td:nth-child(3) a{width:5rem;height:3.5rem;line-height:3.5rem;display:inline-block;color:#fff;border-radius:.3rem;font-size:1.5rem;text-align:center}

#write i{width:3.5rem;height:3.5rem;border:#aaa 1px solid;float:left;background-color:#fff;border-radius:50%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}
#write #audiobtn{background-position:left top;margin-right:.5rem}
#write #bqbtn{background-position:-3.6rem top}
#write .ed,#write i:hover{background-color:#efefef;cursor:pointer}

#content,#startRecord{border-radius:.3rem;position:absolute;left:.5rem;bottom:0;text-indent:0px;outline:0;-webkit-user-select:none;-moz-user-select:none}
#content{background-color:#fff;min-height:3.45rem;max-height:10rem;overflow-y:auto;text-align:left;padding:.8rem .5rem .5rem .5rem;line-height:2rem;font-size:1.4rem;border:0px;width:100%;-webkit-appearance:none;-webkit-user-select:text;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#content img{width:2rem;height:2rem;margin:0 .5rem}

#startRecord{width:calc(100% - 1.2rem);width:-webkit-calc(100% - 1.2rem);height:3.3rem;line-height:3.3rem;color:#666;font-size:1.6rem;font-weight:bold;background-color:#fff;display:none;border:#ddd 1px solid}
#startRecord:hover{background-color:#ccc}

#bq{width:100%;max-width:640px;height:12.5rem;position:absolute;bottom:0;display:none;background-color:#fff;overflow:auto;overflow-y:scroll}
#bq #bqlist{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-around;justify-content:space-around;padding:1rem;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#bq #bqlist img{display:block;float:left;width:2.4rem;height:2.4rem;margin:.5rem .9rem}

.top{width:12rem;left:-webkit-calc(50% - 6rem);position:absolute;top:5.5rem;text-align:center}
.top #loadmore{display:none;width:100%;margin:1rem auto 0 auto;color:#fff;font-size:1.4rem;line-height:2.8rem;height:2.8rem;background-color:#999;border-radius:2rem;border:0;box-shadow:0 .5rem 1rem rgba(0,0,0,0.1)}